<template>
  <view
    class="ellipsis-tip-container"
    ref="ellipsisTipContainer"
    :style="containerStyle"
  >
    <view class="ellipsis-tip-content">{{ content }}</view>
    <view class="down-arrow"></view>
  </view>
</template>

<script setup>
import { ref, nextTick, onUnmounted, computed, getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
// Props 定义
const props = defineProps({
  content: {
    type: String,
    required: true
  },
  right: {
    type: Number,
    default: 40
  }
})

// 响应式数据
const top = ref(0)
const opacity = ref(1)
const show = ref(false)
const timer = ref(null)
const ellipsisTipContainer = ref(null)

// 计算属性
const containerStyle = computed(() => ({
  top: `${top.value}px`,
  opacity: opacity.value,
  display: show.value ? 'block' : 'none',
  right: `${props.right}px`
}))


// 方法
const openTips = async (topValue) => {
  clearTimeout(timer.value)
  show.value = true
  
  await nextTick()
  
  uni.createSelectorQuery()
  	.in(instance)
    .select('.ellipsis-tip-container')
    .boundingClientRect((rect) => {
		console.log(rect,'rect')
      top.value = topValue - 10 <= rect.height ? 0 : topValue - rect.height - 10
	  console.log(top.value,'top')
	  console.log(topValue,'topValue')
      opacity.value = 1
      timer.value = setTimeout(() => {
        opacity.value = 0
        // show.value = false
      }, 2000)
    })
    .exec()
}

const closeTip = () => {
  clearTimeout(timer.value)
  if (opacity.value && show.value) {
    opacity.value = 0
    show.value = false
  }
}

// 暴露方法给父组件使用
defineExpose({
  openTips,
  closeTip
})

// 组件卸载时清理定时器
onUnmounted(() => {
  clearTimeout(timer.value)
})
</script>

<style scoped>
.ellipsis-tip-container {
  max-width: 300rpx;
  background: #303133;
  color: #fff;
  border-radius: 8rpx;
  z-index: 999999;
  position: absolute;
  padding: 20rpx;
  word-wrap: break-word;
  font-size: 24rpx;
  text-align: justify;
  transition: opacity 0.3s ease;
}

.down-arrow {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  border-color: transparent;
  border-top-color: #303133;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
}
</style>
